<template>
	<view>
		<view style="padding: 20rpx; background-color: #F6F6F6;height: 100vh;">
			<u-navbar title="个人" :is-back="false" :background="background">
				<view slot="right" @click="topRightClick">
					<view>
						<image src="../../static/shezhi.png" mode="aspectFill"
						style="width: 40rpx;height: 40rpx;margin-right: 20rpx;"></image>
					</view>
				</view>
			</u-navbar>
			<view>
				<view v-if="userId == 0">
					<h2>欢迎来到西红柿小说</h2>
					<view style="background-color: #fc6b2c; padding: 20rpx 30rpx;border-radius: 2em;
					font-weight: bold;color: #fffbef;width: 230rpx;text-align: center;margin: 20rpx 0 40rpx 0;
					font-size: 29rpx;" @click="logonClick">
						<text>立即登录</text>
					</view>
				</view>
				<view v-else>
					<view class="u-flex" style="justify-content: space-between;margin: 50rpx 0;">
						<view class="u-flex">
							<u-avatar :src="$url+userData.avatar"
							size="130"></u-avatar>
							<view style="margin-left: 20rpx;font-size: 38rpx;font-weight: bold;">{{userData.userName}}</view>
						</view>
						<view style="color: #929292;" @click="peopleClick">个人主页></view>
					</view>
					<view style="justify-content: space-around;text-align: center;" class="u-flex">
						<view @click="followClick">
							<view>{{follow.length}}</view>
							<view style="color: #929292;">关注</view>
						</view>
						<view @click="fansClick">
							<view>{{userData.fans}}</view>
							<view style="color: #929292;">粉丝</view>
						</view>
						<view @click="likeClick">
							<view>{{likesUserId.length}}</view>
							<view style="color: #929292;">获赞</view>
						</view>
					</view>
				</view>
				<view style="background-color: #FEEFDA;height: 150rpx;border-radius: 0.5em;margin: 30rpx 0;
				justify-content: space-between;padding: 0 30rpx;"class="u-flex">
					<view>
						<h4 style="padding:5rpx;color: #554323;">开通会员</h4>
						<view style="padding:5rpx;color: #887E6B;">成为会员，尊享免广告等权益</view>
					</view>
					<view style="text-align: center;">
						<view style="background-color: #FFFFFF; padding: 20rpx 30rpx;border-radius: 2em;
						font-weight: bold;color: #534427;" @click="vipClick">
							{{vip == false?'￥5.00开通':'已开通'}}
						</view>
						<text style="font-size: 20rpx;">VIP剩余时间：</text>
						<u-count-down @end="end" :timestamp="timestamp" fontSize="20"  style="width: 100rpx;"></u-count-down>
					</view>
					
				</view>
				<view style="background-color: #FFFFFF;
				justify-content: space-around;padding: 40rpx 0;"class="u-flex">
					<view style="text-align: center;" @click="browseClick">
						<image src="../../static/icon_wod3/liul.png" mode="aspectFill"
						style="width: 40rpx;height: 40rpx;"></image>
						<view>浏览历史</view>
					</view>
					<view style="text-align: center;" @click="messageClick">
						<image src="../../static/icon_wod3/xiaox.png" mode="aspectFill"
						style="width: 40rpx;height: 40rpx;"></image>
						<view>我的消息</view>
					</view>
					<view style="text-align: center;" @click="writerClick">
						<image src="../../static/icon_wod3/chuangz.png" mode="aspectFill"
						style="width: 40rpx;height: 40rpx;"></image>
						<view>作家中心</view>
					</view>
				</view>
				<view style="background-color: #FFFFFF;margin: 40rpx 0;padding: 30rpx 30rpx;">
					<h3 style="margin: 30rpx 0;">你可能感兴趣的书</h3>
					<scroll-view scroll-x>
						<view class="u-flex">
							<view v-for="(item,index) in bookdataRandom":key="index"
							style="margin: 0 15rpx;">
								<bookshelf-item :item="item" @itemClick="itemClick"></bookshelf-item>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				vip:false,
				timestamp:0,
				userData:{},
				background:{
					backgroundColor:"#F6F6F6"
				},
				userId:0,
				ranX:[],
				bookdataRandom:[],
				follow:[],
				likesUserId:[]
				
			}
		},
		methods: {
			itemClick(e){
				uni.navigateTo({
					url:"../index/bookItem/bookItem?id="+e
				})
			},
			topRightClick(){
				uni.navigateTo({
					url:"./setUp/setUp"
				})
			},
			peopleClick(){
				uni.navigateTo({
					url:"./people/people"
				})
			},
			getUser(){
				this.userId = uni.getStorageSync("userId") || 0
				console.log(this.userId)
				if(this.userId != 0){
					this.getUserData(this.userId)
				}
			},
			async getUserData(id){
				const res=await this.$myRequst({
					url:"/user/get/"+id
				})
				this.userData = res.data.data
				console.log(this.userData)
			},
			logonClick(){
				uni.navigateTo({
					url:"./logon/logon"
				})
			},
			randomX(){//随机数相同的抹杀
				this.bookdataRandom = []
				let max = 20
				let min = 1
				console.log()
				for (var i = 0; i < 7; i++) {
					let x = Math.floor(Math.random() * (max - min + 1)) + min
					let index = this.ranX.findIndex(i=>{ //判断是否重复，没有就返回-1
						return i == x
					})
					if(index >=0){
						this.ranX.splice(index,1)//删除
					}else{
						this.ranX = this.ranX.concat(x)
					}
				}
				this.ranX.forEach(item=>{
					this.getBookdataRandom(item).then((res)=>{
						this.bookdataRandom = this.bookdataRandom.concat(res.data.data)
					})
				})
			},
			async getBookdataRandom(id){
			 	const res=await this.$myRequst({
					url:"/bookData/get/"+id
				})
				return res
			},
			browseClick(){
				uni.navigateTo({
					url:"./browse/browse"
				})
			},
			followClick(){
				uni.navigateTo({
					url:"./follow/follow?item=0"
				})
			},
			fansClick(){
				uni.navigateTo({
					url:"./follow/follow?item=1"
				})
			},
			likeClick(){
				uni.navigateTo({
					url:"./follow/follow?item=2"
				})
			},
			messageClick(){
				uni.navigateTo({
					url:"./message/message"
				})
			},
			getFollowList(){
				if(!uni.getStorageSync("userId")){
					return
				}
				this.follow = []
				this.getFollowAuthor()
				this.getFollowUser()
			},
			async getFollowAuthor(){
				const res=await this.$myRequst({
					url:"/follow/gets/author/"+uni.getStorageSync("userId")
				})
				this.follow = this.follow.concat(res.data.data)
				console.log(this.follow)
			},
			async getFollowUser(){
				const res=await this.$myRequst({
					url:"/follow/gets/user/"+uni.getStorageSync("userId")
				})
				this.follow = this.follow.concat(res.data.data)
				console.log(this.follow)
			},
			async vipPUT(){
				console.log(this.vip)
				const res=await this.$myRequst({
					url:"/user/put",
					method:"PUT",
					data:{
						id:uni.getStorageSync("userId"),
						vip:this.vip
					}
				})
				return res
			},
			async vipClick(){
				if(this.vip){
					return
				}
				uni.showModal({
					title:"确定成为尊贵的vip用户吗~",
					confirmColor:"#E27037",
					success: (res) => {
						if(res.confirm){
							this.vipPUT().then((res)=>{
								console.log(res)
								if(res.data.code == 200){
									uni.showToast({
										title:"恭喜用户开通VIP会员成功~",
										icon:"none",
										position:"top",
										success: (res) => {
											this.vip = true
											this.timestamp = 10
											let vipPaymentArr = uni.getStorageSync("vipPayment") || []
											let vipPayment = {
												payment:5,
												title:"西红柿小说会员",
												time:Date.now(),
												userId:uni.getStorageSync("userId")
											}
											vipPaymentArr.unshift(vipPayment)
											uni.setStorageSync("vipPayment",vipPaymentArr)
										}
									})
								}
							})
						}
					}
				})

			},
			end(){
				//结束
				uni.showToast({
					title:"尊贵的用户，您的vip已过期~",
					icon:"none",
					position:"top",
					success: (res) => {
						this.vip = false
						this.vipPUT()
						
					}
				})
			},
			writerClick(){
				uni.showToast({
					title:"版本过低暂无法进行写作",
					icon:"none",
					position:"top"
				})
			},
			async getLikesUserId(){
				const res=await this.$myRequst({
					url:"/likes/gets/userId/"+uni.getStorageSync("userId")
				})
				this.likesUserId = res.data.data
				console.log(res.data)
			}
		},
		onInit(){
			
		},
		onShow(){
			this.getUser()
			this.randomX()
			this.getFollowList()
			this.getLikesUserId()
		}
	}
</script>

<style>

</style>
